<!--职务管理-->
<template>
  <div class="job-manage">
    <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
      <div slot="title">
        <div class="top-icon">
          <icon-font type="icon-zhiwu" />
        </div>
        <span>职务管理</span>
      </div>
      <div slot="extra">
        <a-dropdown placement="bottomRight">
          <a-button type="primary" icon="upload" class="icon-button">组织操作</a-button>
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="orgClick('add')"><a-icon type="plus" />组织新增</a-menu-item>
            <a-menu-divider />
            <a-menu-item key="2" @click="orgClick('edit')"><a-icon type="edit" />组织编辑</a-menu-item>
            <a-menu-divider />
            <a-menu-item key="3" @click="orgClick('del')"><a-icon type="delete" />组织删除</a-menu-item>
          </a-menu>
        </a-dropdown>
        <a-button type="primary" icon="plus" class="icon-button" @click="jobClick('add')">职务新增</a-button>
      </div>
      <div class="card-table">
        <div class="job-left" :style="{width: (isShowLeftTree ? '0': '18%')}">
          <div class="job-left-tree" v-if="!isShowLeftTree">
            <!-- 组织结构树 -->
            <a-tree
              blockNode
              show-line
              :treeData="treeData"
              defaultExpandAll
              v-if="treeData.length > 0">
            </a-tree>
            <a-empty v-else />
          </div>
          <div class="handle" @click="treeToggle">
            <img src="@/assets/images/leftTree-show.png" alt="" v-if="!isShowLeftTree">
            <img src="@/assets/images/leftTree-hide.png" alt="" v-else>
          </div>
        </div>
        <div class="job-right" :style="{width: (isShowLeftTree ? 'calc(100% - 1px)': '82%')}">
          <!-- 职务管理表格 -->
          <el-table
            :data="jobTableData"
            highlight-current-row
            border
            height="100%"
            :row-style="{height:'40px'}"
            :cell-style="{padding:'0px'}"
            :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
            style="width: 100%">
            <slot v-for="(item,index) in jobColumns">
              <el-table-column
                :key="index"
                :property="item.field"
                :label="item.title"
                :width="item.width"
                show-overflow-tooltip
                sortable>
              </el-table-column>
            </slot>
            <el-table-column label="操作">
              <template>
                <a @click="jobClick('edit')">编辑</a>
                <a-divider type="vertical" />
                <a @click="jobClick('del')">删除</a>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </a-card>

    <!-- 组织结构树弹出框 -->
    <a-modal
      :maskClosable="false"
      :title="modalTitle1"
      v-model="dialogFormVisible1">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form1">
        <a-form-item label="部门名称" >
          <a-input v-decorator="[ 'D_DepName', {rules: [{ required: true, message: '请输入部门名称!' }]} ]" />
        </a-form-item>
        <a-form-item label="部门代号">
          <a-input v-decorator="[ 'D_Code', {rules: [{ required: true, message: '请输入部门代号!' }]} ]" />
        </a-form-item>
        <a-form-item label="部门电话">
          <a-input v-decorator="[ 'D_DepTel1', {rules: [{ required: true, message: '请填写部门电话!' }]} ]" />
        </a-form-item>
        <a-form-item label="部门电话">
          <a-input v-decorator="[ 'D_DepTel2' ]" />
        </a-form-item>
        <a-form-item label="传真">
          <a-input v-decorator="[ 'D_Fax' ]" />
        </a-form-item>
        <a-form-item label="邮编">
          <a-input v-decorator="[ 'D_PostCode' ]" />
        </a-form-item>
        <a-form-item label="备注">
          <a-input type="textarea" v-decorator="[ 'D_Remark' ]" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 职务管理弹出框 -->
    <a-modal
      :maskClosable="false"
      :title="modalTitle2"
      v-model="dialogFormVisible2">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form2">
        <a-form-item label="职位名称">
          <a-input v-decorator="[ 'P_Title', {rules: [{ required: true, message: '请输入职位名称!' }]} ]" />
        </a-form-item>
        <a-form-item label="职位描述">
          <a-input v-decorator="[ 'P_Description' ]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'JobManage',
  components: {
  },
  data () {
    return {
      isShowLeftTree: false, // 左侧显示与隐藏
      treeData: [ // 组织结构树数据
        {
          title: '研发中心',
          key: '1',
          children: [
            { title: '技术部', key: '1-1' },
            { title: '市场部', key: '1-2' },
            { title: '研发部', key: '1-3' }
          ]
        }
      ],
      modalTitle1: '', // 组织结构树弹出框标题
      dialogFormVisible1: false, // 组织结构树弹出框显示与隐藏
      form1: this.$form.createForm(this),
      modalTitle2: '', // 职务管理弹出框标题
      dialogFormVisible2: false, // 职务管理弹出框显示与隐藏
      form2: this.$form.createForm(this),
      jobTableData: [ // 职务管理表格数据
        {
          P_Title: '软件开发',
          P_Description: '开发',
          P_CreateUserID: 'admin',
          P_CreateDate: '2019-12-20'
        }
      ],
      jobColumns: [ // 职务管理表头数据
        {
          title: '职位名称',
          field: 'P_Title'
        },
        {
          title: '职位描述',
          field: 'P_Description'
        },
        {
          title: '录入人',
          field: 'P_CreateUserID'
        },
        {
          title: '录入时间',
          field: 'P_CreateDate'
        }
      ]
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    // 左侧显示与隐藏事件
    treeToggle () {
      this.isShowLeftTree = !this.isShowLeftTree
    },
    // 组织结构树按钮事件 val代表类型，add：组织新增，edit：组织编辑，del：组织删除
    orgClick (val) {
      switch (val) {
        case 'add':
          this.modalTitle1 = '组织新增'
          this.dialogFormVisible1 = true
          this.form1.resetFields() // 表单清空
          break
        case 'edit':
          this.modalTitle1 = '组织编辑'
          this.dialogFormVisible1 = true
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    },
    // 职务管理按钮事件 val代表类型，add：职务新增，edit：职务编辑，del：职务删除
    jobClick (val) {
      switch (val) {
        case 'add':
          this.modalTitle2 = '职务新增'
          this.dialogFormVisible2 = true
          this.form2.resetFields() // 表单清空
          break
        case 'edit':
          this.modalTitle2 = '职务编辑'
          this.dialogFormVisible2 = true
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    }
  }
}
</script>
<style lang="less" scoped>
.job-manage {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
  .card-table {
    height: 100%;
    .job-left {
      float: left;
      width: 18%;
      height: 100%;
      border: 1px solid #EBEEF5;
      border-right: none;
      position: relative;
      transition: all 0.2s;
      .job-left-tree {
        height: 100%;
        overflow: auto;
      }
      .handle {
        position: absolute;
        right: -18px;
        top: 50%;
        margin-top: -32px;
        z-index: 100;
        cursor: pointer;
      }
    }
    .job-right {
      float: left;
      width: 82%;
      height: 100%;
      transition: all 0.2s;
    }
  }
}
</style>
